<template>
  <view class="planting-detail-container">
    <view class="header">
      <roc-icon-plus type="fas" name="arrow-left" :size="20" color="#333" @click="goBack"></roc-icon-plus>
      <text class="title">播种详情</text>
      <view class="edit-btn" @click="editPlanting">
        <roc-icon-plus type="fas" name="edit" :size="16" color="#5654e8"></roc-icon-plus>
      </view>
    </view>
    
    <view class="detail-content" v-if="plantingData">
      <!-- 基本信息 -->
      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">基本信息</text>
        </view>
        
        <view class="info-item">
          <text class="label">播种时间</text>
          <text class="value">{{ plantingData.date }} {{ plantingData.time }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">地块/条田</text>
          <text class="value">{{ plantingData.land }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">条田编号</text>
          <view class="field-tags">
            <view class="field-tag" v-for="(field, index) in plantingFields" :key="index">
              {{ field }}
            </view>
          </view>
        </view>
        
        <view class="info-item">
          <text class="label">农作物/种子</text>
          <text class="value">{{ plantingData.crop }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">播种面积</text>
          <text class="value">{{ plantingData.area }} 亩</text>
        </view>
        
        <view class="info-item">
          <text class="label">负责人</text>
          <text class="value">{{ plantingData.manager || '张明' }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">播种方式</text>
          <view class="method-tag" :class="getMethodClass(plantingData.method)">
            <roc-icon-plus 
              type="fas" 
              :name="getMethodIcon(plantingData.method)" 
              :size="14" 
              :color="getMethodIconColor(plantingData.method)"
            ></roc-icon-plus>
            <text>{{ plantingData.method }}</text>
          </view>
        </view>
      </view>
      
      <!-- 播种照片 -->
      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">播种照片</text>
        </view>
        
        <view class="photo-list" v-if="plantingImages.length > 0">
          <view class="photo-item" v-for="(img, index) in plantingImages" :key="index" @click="previewImage(index)">
            <image :src="img" mode="aspectFill"></image>
          </view>
        </view>
        
        <view class="empty-photos" v-else>
          <text>暂无播种照片</text>
        </view>
      </view>
      
      <!-- 播种记录 -->
      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">操作记录</text>
        </view>
        
        <view class="timeline">
          <view class="timeline-item">
            <view class="time-dot"></view>
            <view class="time-line"></view>
            <view class="time-content">
              <view class="time-header">
                <text class="time-title">播种创建</text>
                <text class="time-date">{{ plantingData.date }}</text>
              </view>
              <view class="time-desc">
                <text>{{ plantingData.manager || '张明' }} 创建了播种记录</text>
              </view>
            </view>
          </view>
          
          <view class="timeline-item">
            <view class="time-dot"></view>
            <view class="time-content">
              <view class="time-header">
                <text class="time-title">开始播种</text>
                <text class="time-date">{{ plantingData.date }}</text>
              </view>
              <view class="time-desc">
                <text>使用 {{ plantingData.method }} 方式完成了播种</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <view class="loading" v-else>
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      plantingId: null,
      plantingData: null,
      plantingFields: ['A区', 'B区'],  // 模拟数据
      plantingImages: [
        '/static/images/planting/sample1.jpg',
        '/static/images/planting/sample2.jpg'
      ]  // 模拟数据
    }
  },
  onLoad(options) {
    if (options.id) {
      this.plantingId = parseInt(options.id);
      this.loadPlantingDetail(this.plantingId);
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    loadPlantingDetail(id) {
      // 在实际应用中，这里应该从API获取数据
      // 这里模拟加载数据
      setTimeout(() => {
        this.plantingData = this.getMockPlantingData(id);
      }, 500);
    },
    getMockPlantingData(id) {
      const mockData = [
        {
          id: 1,
          date: '2023年10月15日',
          time: '08:30',
          land: '一号地块',
          crop: '冬小麦/中麦175',
          area: 15.6,
          method: '水直播-无人机',
          manager: '张明'
        },
        {
          id: 2,
          date: '2023年10月12日',
          time: '14:15',
          land: '二号地块',
          crop: '玉米/郑单958',
          area: 23.2,
          method: '水直播-机械',
          manager: '李刚'
        },
        {
          id: 3,
          date: '2023年10月8日',
          time: '09:45',
          land: '三号地块',
          crop: '水稻/中早39',
          area: 18.7,
          method: '插秧-机械',
          manager: '王强'
        },
        {
          id: 4,
          date: '2023年10月5日',
          time: '10:30',
          land: '四号地块',
          crop: '大豆/中黄13',
          area: 12.5,
          method: '插秧-机械',
          manager: '陈军'
        }
      ];
      return mockData.find(item => item.id === id);
    },
    editPlanting() {
      uni.navigateTo({
        url: `/pages/agriculture/plantingManagement/addPlanting?id=${this.plantingId}`
      });
    },
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.plantingImages
      });
    },
    getMethodClass(method) {
      if (method.includes('水直播')) return 'method-water';
      if (method.includes('旱直播')) return 'method-dry';
      if (method.includes('插秧')) return 'method-transplant';
      return '';
    },
    getMethodIcon(method) {
      if (method.includes('水直播')) return 'water';
      if (method.includes('旱直播')) return 'seedling';
      if (method.includes('插秧')) return 'seedling';
      return 'seedling';
    },
    getMethodIconColor(method) {
      if (method.includes('水直播')) return '#4fc3f7';
      if (method.includes('旱直播')) return '#66bb6a';
      if (method.includes('插秧')) return '#ff9800';
      return '#333';
    }
  }
}
</script>

<style lang="scss">
.planting-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .header {
    height: 100rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .edit-btn {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .detail-content {
    padding: 20rpx;
    
    .detail-card {
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      padding: 30rpx;
      box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.03);
      
      .card-header {
        margin-bottom: 20rpx;
        
        .card-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          position: relative;
          padding-left: 20rpx;
          
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6rpx;
            height: 28rpx;
            background-color: #5654e8;
            border-radius: 3rpx;
          }
        }
      }
      
      .info-item {
        display: flex;
        margin-bottom: 20rpx;
        align-items: center;
        
        .label {
          width: 180rpx;
          font-size: 28rpx;
          color: #999;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333;
        }
        
        .field-tags {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          
          .field-tag {
            display: inline-block;
            background-color: #e6e5ff;
            color: #5654e8;
            padding: 6rpx 16rpx;
            border-radius: 6rpx;
            font-size: 24rpx;
            margin-right: 16rpx;
            margin-bottom: 10rpx;
          }
        }
        
        .method-tag {
          display: flex;
          align-items: center;
          padding: 6rpx 16rpx;
          border-radius: 6rpx;
          
          roc-icon-plus {
            margin-right: 8rpx;
          }
          
          text {
            font-size: 26rpx;
          }
          
          &.method-water {
            background-color: #e3f2fd;
            color: #4fc3f7;
          }
          
          &.method-dry {
            background-color: #e8f5e9;
            color: #66bb6a;
          }
          
          &.method-transplant {
            background-color: #fff3e0;
            color: #ff9800;
          }
        }
      }
      
      .photo-list {
        display: flex;
        flex-wrap: wrap;
        
        .photo-item {
          width: 210rpx;
          height: 210rpx;
          border-radius: 8rpx;
          overflow: hidden;
          margin-right: 15rpx;
          margin-bottom: 15rpx;
          
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      
      .empty-photos {
        padding: 40rpx 0;
        text-align: center;
        color: #999;
        font-size: 28rpx;
      }
      
      .timeline {
        padding: 10rpx 0;
        
        .timeline-item {
          display: flex;
          position: relative;
          padding-bottom: 40rpx;
          
          .time-dot {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            background-color: #5654e8;
            margin-right: 20rpx;
            margin-top: 12rpx;
            z-index: 2;
          }
          
          .time-line {
            position: absolute;
            left: 8rpx;
            top: 28rpx;
            width: 2rpx;
            height: 100%;
            background-color: #e6e5ff;
            z-index: 1;
          }
          
          .time-content {
            flex: 1;
            
            .time-header {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10rpx;
              
              .time-title {
                font-size: 28rpx;
                font-weight: 500;
                color: #333;
              }
              
              .time-date {
                font-size: 24rpx;
                color: #999;
              }
            }
            
            .time-desc {
              font-size: 26rpx;
              color: #666;
              line-height: 1.5;
            }
          }
          
          &:last-child {
            padding-bottom: 0;
            
            .time-line {
              display: none;
            }
          }
        }
      }
    }
  }
  
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
    color: #999;
    font-size: 28rpx;
  }
}
</style> 